<template>
  <div>
      <div id="map" ref="rootMap" class="map"></div>
      <div id="popup" class="ol-popup">
          <a href="#" id="popup-closer" ref="closer" class="ol-popup-closer"></a>
          <div id="popup-content">
            {{}}
          </div>
      </div>
  </div>  
</template>

<script>
import "ol/ol.css";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

import Overlay from 'ol/Overlay';
import {toStringHDMS} from 'ol/coordinate';
import {toLonLat} from 'ol/proj';
import TileJSON from 'ol/source/TileJSON';

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      map: null,
      overlay:null,
      hdms:null
    }
  },
  mounted(){
    this.initMap();
  },
  methods:{
    initMap(){
      var layers = [
        new TileLayer({
          // extent: [// 边界
          //   73.44696044921875,
          //   3.408477306365967,
          //   135.08583068847656,
          //   53.557926177978516
          // ],
          // source: new TileWMS({
          //   url: "http://localhost:8080/geoserver/tiger/wms",
          //   // Layers需要指定要显示的图层名
          //   params: { LAYERS: "tiger:poly_landmarks", TILED: true },
          //  	// serverType明显为geoserver
          //   serverType: "geoserver",
          //   // Countries have transparency, so do not fade tiles:
          //   transition: 0
          // })
          source:  new OSM()
        })
      ];

      this.overlay = new Overlay({
        element: document.getElementById('popup'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      });     

      this.map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        target: "map",
        overlays: [this.overlay],
        view: new View({
          projection: "EPSG:4326",
          center: [0, 0],
          zoom: 4
        })
      });

      this.map.on('singleclick', function(evt) {debugger
        var coordinate = evt.coordinate;
        var hdms = toStringHDMS(toLonLat(coordinate));

        this.hdms = hdms;
        alert(coordinate);
        //this.overlay.setPosition(coordinate);
      });

    },
    closeWin() {
        overlay.setPosition(undefined);
        this.$refs.closer.blur();
        return false;
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .map {
    height: 700px;
    width: 100%;
  }
  body{
    margin:0 !important;
  }
  #app{
    margin:0 !important;
  }
</style>
